<template>
<table border="1">
    <tr>
        <td>用户编号</td>
        <td>用户账号</td>
        <td>用户密码</td>
        <td>用户角色</td>
        <td>用户状态</td>
        <td>操作</td>
    </tr>
    <tr v-for="i in data">
        <td>{{ i.Uid }}</td>
        <td>{{ i.Uname }}</td>
        <td>******</td>
        <td>{{ i.Rname }}</td>
        <td>{{ i.Ustate==1?"未删除":"已删除" }}</td>
        <td><a href="#" @click="DeleteById(i.Uid)">删除</a></td>
    </tr>
</table>
<a href="#" @click="PageChange('F')">首页</a>
<a href="#" @click="PageChange('P')">上一页</a>
<a href="#" @click="PageChange('N')">下一页</a>
<a href="#" @click="PageChange('L')">尾页</a>
</template>
<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue'
const data=ref([{
    Uid:0,
    Uname:'',
    Ustate:0,
    Rname:''

}])
const PageInfo=ref({
    PageIndex:1,
    PageSize:2,
    ReCount:0,
    PageCount:0
})
onMounted(()=>{
    show()
})
const show=()=>{
    axios.get("https://localhost:44396/api/UserRole/ShowUserRole",
        {
            params:{
                PageIndex:PageInfo.value.PageIndex,
                PageSize:PageInfo.value.PageSize
            }
        }
    ).then(res=>{
        
        data.value=res.data.list
        PageInfo.value.PageCount=res.data.PageCount
        PageInfo.value.ReCount=res.data.ReCount
        console.log(data.value)
    }).catch(err=>{
        console.log(err)
    })
}
const PageChange=(m:string)=>{
    if(m=="F"){
        PageInfo.value.PageIndex=1
    }
    if(m=="L"){
        PageInfo.value.PageIndex=PageInfo.value.PageCount
    }
    if(m=="P"){
        if(PageInfo.value.PageIndex==1){
            
            return
        }
        PageInfo.value.PageIndex--
    }
    if(m=="N"){
        if(PageInfo.value.PageIndex==PageInfo.value.PageCount){
            
            return
        }
        PageInfo.value.PageIndex++
    }
    show()
}
const DeleteById=(Uid:Number)=>{
    if(!confirm("确定要删除吗？")){
        return
    }
    axios.get("https://localhost:44396/api/UserRole/DeleteById",
        {
            params:{
                Uid:Uid
            }
        }
    ).then(res=>{
        if(res.data>0){
            alert("删除成功")
            show()
        }else{
            alert("删除失败")
        }
    }).catch(err=>{
        console.log(err)
    })
 }

</script>